<template>
	<view class="pageV">
		<!-- 地址 -->
		<u-navbar :title="mAddressId?'编辑地址':'新增地址'" placeholder :autoBack="true" leftIconColor="#E6A5B4" bgColor="#000000"
			:titleStyle="titleStyle">
		</u-navbar>

		<view class="centV">
			<view class="itemV">
				<view class="itemTv">收货人</view>
				<view class="itemInput">
					<input v-model="mName" placeholder="请输入姓名" />
				</view>
			</view>

			<view class="itemV">
				<view class="itemTv">手机号</view>
				<view class="itemInput">
					<input v-model="mPhone" placeholder="请输入手机号" maxlength="11" type="number" />
				</view>
			</view>

			<view class="itemV" @click="onCityClick()">
				<view class="itemTv">所在地区</view>
				<view class="itemTv2" v-if="!mCity">
					请选择
				</view>
				<view class="itemTv2" v-else>
					{{mCity}}
				</view>
				<u-icon name="arrow-right" color="#8D8D8D" size="13"></u-icon>
			</view>

			<view class="itemV">
				<view class="itemTv">详细地址</view>
				<view class="itemInput">
					<input v-model="mAddress" placeholder="请输入详细地址" />
				</view>
			</view>

			<view class="itemV2">
				<view class="itemTv">是否默认</view>
				<view class="itemTv2">
					<u-switch activeColor="#E6A5B4" inactiveColor="#FFFFFF" v-model="mIsdefault"></u-switch>
				</view>
			</view>
		</view>

		<view class="sumTv" @click="onSaveClick()">保存</view>
		<view v-if="mAddressId" class="deleteV" @click="showDelete=true">
			<image src="https://s1.ax1x.com/2023/04/22/p9ZPVyV.png"></image>
			<text>删除</text>
		</view>


		<u-picker :columns="columnData" :loading="loading" :show="cityShow" @cancel="onCancelClick()" keyName="label"
			ref="uPicker" :defaultIndex="defaultIndex" @change="changeHandler" @confirm="onConfirmClick()"></u-picker>

		<u-modal @confirm="onDelete()" @cancel="showDelete=false" :show="showDelete" :showCancelButton="true"
			content="确定要删除地址吗？"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				mAddressId: null,
				cityShow: false,
				loading: false,
				showDelete: false,
				columnData: [
					[{
						'label': "河南省",
						'id': 1532
					}],
					[{
						'label': "郑州市",
						'id': 1533
					}],
				],
				defaultIndex: [0, 0, 0],
				mIsdefault: false,
				mName: '',
				mPhone: '',
				mCity: '',
				mid1: '',
				mid2: '',
				mid3: '',
				mAddress: '',
			}
		},
		onLoad(e) {
			this.mAddressId = e.id;
			if (this.mAddressId) {
				this.getShopAddressInfo()
			}
		},
		methods: {

			getShopAddressInfo() {
				this.$api.getShopAddressInfo({
					id: this.mAddressId
				}).then((res) => {
					this.mName = res.name
					this.mPhone = res.mobile
					this.mCity = res.province_name+"-"+res.city_name+"-"+res.area_name
					this.mAddress = res.address
					this.mid1 = res.province_id
					this.mid2 = res.city_id
					this.mid3 = res.area_id
					this.mIsdefault = res.is_default == 1 ? true : false
				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "获取失败" : e.msg)
				})
			},
			getCity() {
				this.$api.getShopCity({
					pid: 1533
				}).then((res) => {
					this.columnData.push(res);
					this.cityShow = true;
				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "获取失败" : e.msg)
				})
			},
			onCityClick() {
				this.getCity();
			},
			onCancelClick() {
				this.cityShow = false;
			},
			onConfirmClick(e) {
				this.cityShow = false;
				this.mCity = e.value[0].label + "-" + e.value[1].label + "-" + e.value[2].label
				this.mid1 = e.value[0].id;
				this.mid2 = e.value[1].id;
				this.mid3 = e.value[2].id;
			},
			onSaveClick() {
				console.log("---", this.mIsdefault)
				if (this.mName.length == 0) {
					uni.$u.toast("请输入姓名")
					return
				}
				if (this.mPhone.length == 0) {
					uni.$u.toast("请输入手机号")
					return
				}
				if (this.mCity.length == 0) {
					uni.$u.toast("请选择城市")
					return
				}
				if (this.mAddress.length == 0) {
					uni.$u.toast("请输入详细地址")
					return
				}
				if (this.mAddressId) {
					this.onEdit();
				}else{
					this.onSave();
				}
				
			},
			onSave(){
				uni.showLoading({
					title: "请稍后"
				})
				this.$api.addShopAddress({
					name: this.mName,
					mobile: this.mPhone,
					address: this.mAddress,
					province_id: this.mid1,
					city_id: this.mid2,
					area_id: this.mid3,
					is_default: this.mIsdefault ? 1 : 0
				}).then((res) => {
					uni.hideLoading();
					uni.$u.toast("添加成功")
					uni.navigateBack();
				}).catch((e) => {
					uni.hideLoading()
					uni.$u.toast(e.msg === undefined ? "添加失败" : e.msg)
				})
			},
			onEdit(){
				uni.showLoading({
					title: "请稍后"
				})
				this.$api.getShopAddressEdit({
					name: this.mName,
					mobile: this.mPhone,
					address: this.mAddress,
					province_id: this.mid1,
					city_id: this.mid2,
					area_id: this.mid3,
					is_default: this.mIsdefault ? 1 : 0,
					id: this.mAddressId
				}).then((res) => {
					uni.hideLoading();
					uni.$u.toast("修改成功")
					uni.navigateBack();
				}).catch((e) => {
					uni.hideLoading()
					uni.$u.toast(e.msg === undefined ? "修改失败" : e.msg)
				})
			},
			onDelete() {
				uni.showLoading({
					title: "请稍后"
				})
				this.$api.getShopAddressDelete({
					id: this.mAddressId
				}).then((res) => {
					uni.hideLoading();
					uni.$u.toast("删除成功")
					uni.navigateBack();
				}).catch((e) => {
					uni.hideLoading()
					uni.$u.toast(e.msg === undefined ? "删除失败" : e.msg)
				})
			},
			changeHandler(e) {

			}
		}
	}
</script>

<style lang="scss">
	.pageV {
		width: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.centV {
		background: #383838;
		border-radius: 10rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		width: -webkit-fill-available;
	}

	.itemV {
		margin-left: 30rpx;
		margin-right: 30rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #787878;
		height: 105rpx;
	}

	.itemTv {
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.itemInput {
		margin-left: 30rpx;
		flex: 1;

		input {
			color: #fff;
		}
	}

	.itemTv2 {
		margin-left: 30rpx;
		flex: 1;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.itemV2 {
		margin-left: 30rpx;
		margin-right: 30rpx;
		display: flex;
		align-items: center;
		height: 105rpx;
	}

	.sumTv {
		margin-top: 60rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100rpx;
		background: #E6A5B4;
		border-radius: 10rpx;
		font-size: 32rpx;
		color: #333737;
		width: -webkit-fill-available;
	}

	.deleteV {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 30rpx;

		image {
			width: 30rpx;
			height: 30rpx;
		}

		text {
			color: #fff;
			font-size: 32rpx;
			margin-left: 20rpx;
		}
	}
</style>
